<template>
  <free-app
    bgType="image"
    :showNavbar="true"
    :navbar="navbarOptions"
    bgColor="#F5F9FF"
    bgImage="/static/images/goods/navbar.png"
  >
    <view class="p-3 flex flex-col gap-3 mt-[300rpx] min-h-[100vh]">
      <!-- serach -->
      <view class="flex flex-col gap-3 bg-white rounded-3 p-3">
        <GsMoney
          :money="178"
          moneyUnitSize="24rpx"
          moneySize="52rpx"
          :showUnitIcon="true"
        ></GsMoney>
        <view class="text-size-3 font-500">
          {{ goodsData?.title }}
        </view>
      </view>
      <view class="flex flex-col gap-3 bg-white rounded-3 p-3">
        <view>商品详情</view>
        <view class="bg-white rounded-[20rpx]">
          <mphtml :content="goodsData?.description"></mphtml
        ></view>
      </view>
    </view>
    <GsFixedBottom>
      <view class="flex w-full px-4 pb-[30rpx]">
        <button
          class="btn bg-warning-6 text-white rounded-l-5 rounded-r-0 flex-1"
          @click="openPop(buttonType.card)"
        >
          {{ buttonType.card.text }}
        </button>
        <button
          class="btn bg-danger-6 text-white rounded-r-5 rounded-l-0 flex-1"
          @click="openPop(buttonType.buy)"
        >
          {{ buttonType.buy.text }}
        </button></view
      ></GsFixedBottom
    >
    <wd-popup
      v-model="showPop"
      custom-style="border-radius:32rpx;height: 200px;"
      @close="handleClose"
      lock-scroll
      :closable="true"
      position="bottom"
      :safe-area-inset-bottom="true"
    >
      <view class="p-4 flex flex-col">
        <goodsCard
          :data="goodsData"
          :showSpecBtn="true"
          class="flex-1 w-full"
        ></goodsCard>

        <GsFixedBottom>
          <view class="flex w-full px-4 pb-[30rpx]">
            <button
              class="btn text-white rounded-5 flex-1"
              :style="{ background: buttonTypeValue.color }"
              @click="handleDo"
            >
              {{ buttonTypeValue.text }}
            </button>
          </view>
        </GsFixedBottom>
      </view>
    </wd-popup>
  </free-app>
</template>

<script setup>
import { ref } from "vue";
import { onUnload, onLoad } from "@dcloudio/uni-app";
import GsMoney from "@/components/GsMoney/index.vue";
import mphtml from "@/components/GsMpHtml/index.vue";
import GsFixedBottom from "@/components/GsFixedBottom/index.vue";
import goodsCard from "@/components/goods-card/index.vue";
const navbarOptions = {
  title: "商品详情",
  placeholder: true,
};
const buttonType = ref({
  card: {
    value: 1,
    text: "加入购物车",
    color: "#FF7D00",
  },
  buy: {
    value: 2,
    text: "立刻购买",
    color: "#F53F3F",
  },
});
const buttonTypeValue = ref(buttonType.value.buy);
const goodsData = ref();
const subCategories = ref(
  new Array(24).fill(null).map(() => ({
    imgUrl: "/static/images/temp/logo.png",
    title: "移修适用于苹果11 屏幕（标准）",
    description: "适配型号苹果12/苹果12Pro",
    price: "129.9",
    stock: 129,
    num: 0,
  }))
);
const showPop = ref(false);
const handleClose = () => {
  showPop.value = false;
};
const fetchGoodsDetail = async () => {
  goodsData.value = subCategories.value[0];
};
const openPop = (val) => {
  buttonTypeValue.value = val;
  showPop.value = true;
};
const handleDo = async () => {
  if (buttonTypeValue.value.value === buttonType.value.buy.value) {
    uni.navigateTo({
      url: "/pagesGoods/goodsOrder",
    });
  } else {
    uni.showToast({
      title: "放入购物车成功",
    });
  }
  handleClose();
};
onLoad(async () => {
  await fetchGoodsDetail();
});
</script>

<style lang="scss" scoped></style>
